import 'package:flutter/material.dart';
import 'package:flutter_components_web/cons/constant.dart';
import 'package:flutter_components_web/utils/responsive.dart';

import '../shared/com_hover.dart';

class ComColumnMenu extends StatefulWidget {
  const ComColumnMenu({super.key});

  @override
  State<ComColumnMenu> createState() => _ComColumnMenuState();
}

class _ComColumnMenuState extends State<ComColumnMenu> with Constants {
  late List menus;
  late int selectedIndex;

  @override
  void initState() {
    menus = [
      ("assets/images/icon1.png", "Dashboard"),
      ("assets/images/icon2.png", "Payout"),
      ("assets/images/icon3.png", "Leaderboard"),
      ("assets/images/icon4.png", "Order List"),
      ("assets/images/icon5.png", "Buy Challenge"),
      ("assets/images/icon6.png", "Affiliate"),
      ("assets/images/icon7.png", "Assets"),
      ("assets/images/icon8.png", "Settings"),
    ];
    selectedIndex = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: primaryMenuColor,
      body: Container(
        margin: EdgeInsets.all(10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          border: Border.all(color: primaryButtonColor),
        ),
        height: double.infinity,
        width: asideWidth,
        child: ListView(
          padding: EdgeInsets.all(5),
          children:
              menus.map((e) {
                int index = menus.indexOf(e);
                return _buildMenu(e.$1, e.$2, index);
              }).toList(),
        ),
      ),
    );
  }

  Widget _buildMenu(String icon, String text, int index) {
    final color =
        selectedIndex == index ? primaryMenuTextColor : secondaryMenuTextColor;
    final iconWidget = Container(
      margin: EdgeInsets.only(right: showAsideMenuText ? 10 : 0),
      child: Image.asset(icon, width: 18, height: 18, color: color),
    );
    return ComHover(
      hoverColor: primaryButtonColor.withValues(alpha: 0.1),
      child: Material(
        borderRadius: BorderRadius.circular(15),
        color: selectedIndex == index ? secondaryMenuColor : Colors.transparent,
        child: InkWell(
          borderRadius: BorderRadius.circular(15),
          onTap: () {
            _switchMenu(index);
          },
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 15, horizontal: 25),
            alignment:
                showAsideMenuText ? Alignment.centerLeft : Alignment.center,
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(15)),
            child:
                showAsideMenuText
                    ? Text.rich(
                      TextSpan(
                        children: [
                          WidgetSpan(
                            alignment: PlaceholderAlignment.middle,
                            child: iconWidget,
                          ),
                          TextSpan(text: text, style: TextStyle(color: color)),
                        ],
                      ),
                    )
                    : iconWidget,
          ),
        ),
      ),
    );
  }

  // 切换菜单
  _switchMenu(int index) {
    selectedIndex = index;
    setState(() {});
  }

  // 侧边宽度
  double get asideWidth =>
      context.responsive<double>(100, sm: 200, md: 250, lg: 300, xl: 350);

  // 是否显示
  bool get showAsideMenuText =>
      context.responsive<bool>(false, sm: true, md: true, lg: true, xl: true);
}
